<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <div id="test1"></div>

    <!-- 引入 react 核心库 -->
    <script src="./js/react.development.js" type="text/javascript"></script> <!-- React 对象 -->
    <script src="./js/react-dom.development.js" type="text/javascript"></script> <!-- ReactDOM 对象 -->
    <script src="./js/babel.min.js" type="text/javascript"></script> <!-- babel -->
    <script src="./js/prop-types.js" type="text/javascript"></script> <!-- PropTypes -->

    <script type="text/babel">
        class Count extends React.Component {
            constructor(props) {
                super(props)
                console.log('constructor')
                // 初始化状态
                this.state = {
                    count: 1
                }
            }
            // 必须加 static
            // 返回状态对象,如果 state 的值在任何时候都取决于props 时使用，入参可以接收props和state
            static getDerivedStateFromProps(props, state) {
                console.log('getDerivedStateFromProps')
                return props
            }
            // 组件挂载完毕的钩子
            componentDidMount() {
                console.log('componentDidMount')
            }
            add = () => {
                const {count} = this.state
                this.setState({
                    count: count+1
                })
            }
            death = () => {
                ReactDOM.unmountComponentAtNode(document.querySelector('#test1'))
            }
            // 组件卸载的钩子
            componentWillUnmount() {
                console.log('componentWillUnmount');
            }
            /* 
                控制组件更新的阀门钩子
                点击 +1
                默认已有，返回 true，如果重写必须有返回值，且返回值为boolean
                如果返回false，则不更新
            */
            shouldComponentUpdate() {
                console.log('shouldComponentUpdate')
                return true
            }
            // 组件更新完毕的钩子
            componentDidUpdate() {
                console.log('componentDidUpdate')
            }
            render(){
                console.log('render')
                return (
                    <div>
                        <h2>当前求和为{this.state.count}</h2>
                        <button onClick={this.add}>+1</button>
                        <button onClick={this.death}>关闭</button> 
                    </div>
                )
            }
        }
        ReactDOM.render(<Count count={108}/>, document.querySelector('#test1'))
    </script>
</body>
</html>